<template>
  <div class="commonPropertypage">
    <!-- 上传成功以后的提示  -->
    <div v-if="!showSuccess">
      <div
        class="showWrap animated bounceInRight"
        style="padding: 15px;text-align: center;"
      >
        <showSuccess ref="showSuccessTree" />
      </div>
    </div>
    <div v-if="showSuccess" class="commonComponent">
      <div v-if="isProcess === 1" class="commonComponent_head">
        <!-- 公共的用户信息 -->
        <div class="commonComponent_head_info">
          <div style="display:flex;">
            <div
              v-for="(item, index) in form.filter(
                item => item.systemVariablesName === 'showAvatar'
              )"
              :key="index"
              style="flex:1"
            >
              <span v-if="item.display===1">
                <span v-if="item">
                  <img
                    style="width:55px;height:55px;border-radius:50%;margin-top:5px"
                    :src="'data:image/jpg;base64,' + item.value"
                  >
                </span>
              </span>
            </div>
            <div style="flex:10;margin-top:10px">
              <el-row>
                <el-col
                  v-for="(item, index) in form.filter(
                    item => item.systemVariablesName !== 'showAvatar'
                  )"
                  :key="index"
                  :span="8"
                >
                  <div>
                    <div v-if="item.display===1">
                      {{ item.title }}:<span class="info_style">
                        <span v-if="item.key === 'acceptanceFormNum'">
                          {{
                            item.value === "" ? "提交时自动生成" : item.value
                          }}
                        </span>
                        <span v-else>
                          <span v-if="flag === 0">
                            <!-- 存在特殊系统变量 -->
                            <span
                              v-if="
                                item.systemVariablesName === 'enterpriseList'
                              "
                            >
                              <span v-if="item.componentType === 'select'">
                                <el-select
                                  v-model="item.value"
                                  style="width: 50%;"
                                  :disabled="Number(item.edit) === 0"
                                  placeholder="请选择部门"
                                  @change="changeEnterpriseOption"
                                >
                                  <el-option
                                    v-for="item1 in item.opintion"
                                    :key="item1.name"
                                    :label="item1.name"
                                    :value="item1.name"
                                  />
                                </el-select>
                              </span>
                              <span v-else>
                                {{ item.value }}
                              </span>
                            </span>
                            <span v-else>
                              <!-- 输入框 -->
                              <span v-if="item.componentType === 'input'">
                                <el-input
                                  ref="innerOper"
                                  v-model="item.value"
                                  :placeholder="'请输入' + item.title"
                                  :disabled="item.edit === '0'"
                                  style="width: 50%;"
                                  :type="
                                    item.isNumber === 1 ? 'number' : 'string'
                                  "
                                  :data-dataIndex="item.dataIndex"
                                  @input="v => itemEditMark(item, v)"
                                  @keyup.native="v => setInnerValue()"
                                />
                              </span>
                              <!-- 文本框 -->
                              <span v-if="item.componentType === 'text'">
                                {{ item.value }}
                              </span>
                              <!-- 日期 -->
                              <span
                                v-if="item.componentType === 'dayDateSelect'"
                                class="datePicker"
                              >
                                <el-date-picker
                                  ref="innerOper"
                                  v-model="item.value"
                                  :title="item.title"
                                  :class="{ myEllipsis: item.ellipsis === '1' }"
                                  :type="dataPicker(item).type"
                                  :value-format="dataPicker(item).format"
                                  :disabled="item.edit === '0'"
                                  style="width: 40%;"
                                  :data-dataIndex="item.dataIndex"
                                  @change="changePicker(item)"
                                />
                              </span>
                              <!--下拉框 -->
                              <span
                                v-if="
                                  [
                                    'select',
                                    'enterpriseIn',
                                    'enterpriseList'
                                  ].includes(item.componentType)
                                "
                              >
                                <Select-Url
                                  ref="selectUrl"
                                  :item="item"
                                  :disabled="item.edit === '0'"
                                  style="width: 50%;"
                                  :class="{ myEllipsis: item.ellipsis === '1' }"
                                  :data-dataIndex="item.dataIndex"
                                  :select-value="item.value"
                                  @change="v => selChange(v, item)"
                                  @changeItemOption="changeItemOption"
                                />
                              </span>
                              <!-- 树形下拉 -->
                              <span v-if="['treeSelect', 'treeSelectBot', 'enterpriseListTree', 'enterpriseInTree'].includes(item.componentType) ">
                                <SelectTree
                                  :item="item"
                                  style="width: 50%;"
                                  :disabled="item.edit === 0"
                                  :placeholder="item.promptText || '请选择'"
                                  :select-value="item.myValue"
                                  :class="{'myEllipsis': item.ellipsis === 1}"
                                  @changeData="selectTreeChange"
                                />
                              </span>
                              <!-- <span v-if="item.componentType === 'treeSelect'">
                                <SelectTre
                                  style="width: 50%;"
                                  :item="item"
                                  :class="{ myEllipsis: item.ellipsis === '1' }"
                                  :select-value="item.value"
                                  @changeData="selectTreeChange"
                                />
                              </span> -->
                            </span>
                          </span>
                          <span v-else>
                            {{ item.value }}
                          </span>
                        </span>
                      </span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <!-- 公用的操作区域, 0 是发起，只显示暂存和提交按钮  2 是编辑，显示通过，驳回，废弃。 1是查看,不显示按钮-->
        <div v-if="flag !== 1" class="commonComponent_head_do">
          <div v-if="flag === 0" class="commonComponent_head_do_container">
            <!-- 暂存  -->
            <div
              class="commonComponent_head_btn zcStyle"
              @click="commonDo('')"
            />
            <!-- 提交 -->
            <div
              class="commonComponent_head_btn submitStyle"
              @click="commonDo('start')"
            />
          </div>
          <!-- 公用的操作区域, 2是发起，显示通过，驳回，废弃  -->
          <div v-if="flag === 2" class="commonComponent_head_do_container">
            <!-- 废弃 -->
            <div
              class="commonComponent_head_btn fqStyle"
              @click="commonDo('abandom')"
            />
            <!-- 提交 -->
            <div
              class="commonComponent_head_btn submitStyle"
              @click="commonDo('specialStart')"
            />
          </div>
        </div>
      </div>
      <!-- 公用的内容部分 -->
      <div class="commonComponent_container" :style="setCommonContainerHeight">
        <div id="component">
          <div v-if="loading" class="commonComponent_container_skeleton">
            <a-skeleton
              :width="60"
              active
              :paragraph="{
                rows: 5,
                width: '100%'
              }"
              :title="{
                width: '40%'
              }"
            />
          </div>
          <component
            :is="apps"
            ref="commonComponents"
            class="commonComponents"
            :error-components="errorComponents"
            :is-process="isProcess"
            :specila-menu-id="specilaMenuId"
            @getDataSource="getDataSoure"
          />
        </div>
        <div v-if="isProcess === 1" class="commonComponent_right">
          <!-- 公用的流程处理 -->
          <div class="commonComponent_right_title">
            <div style="flex:1;line-height: 33px;">流程处理</div>
            <div style="flex:2;text-align: right;">
              <el-button
                size="mini"
                @click="showDialog('lc')"
              >流程图</el-button>
              <el-button
                size="mini"
                @click="showDialog('rz')"
              >流程日志</el-button>
            </div>
          </div>
          <!-- 公用的流程处理内容 分支条件 -->
          <div class="commonComponent_right_content">
            <div
              v-if="flag !== 0 && flag !== 1"
              style="margin-bottom:15px"
              class="commonComponent_right_content_do"
            >
              <b style="flex:1">操作:</b>
              <div style="flex:2.5">
                <el-radio-group v-model="czRadio" @change="changeDo">
                  <el-radio :label="0">通过</el-radio>
                  <el-radio :label="1">驳回</el-radio>
                </el-radio-group>
              </div>
              <!-- <div v-else style="flex:2">
                暂无操作
              </div> -->
            </div>
            <div class="commonComponent_right_content_title">
              <b style="flex:1">{{ nodeName }}:</b>
            </div>
            <div
              v-if="freeSelectNode"
              class="commonComponent_right_content_detail"
            >
              <b
                style=" display: block;height: 20px;margin-bottom: 5px;font-size: 14px;margin-left: 0px;"
              >人工决策:</b>
              <el-radio-group
                v-model="radio"
                style="vertical-align: unset;margin-top:5px"
                @change="changeRadio"
              >
                <div style="display: flex;flex-wrap: wrap;">
                  <div
                    v-for="(item, key) in nodeNameMapFilter"
                    :key="key"
                    :style="{ width: nodeNameMapFilter.length===1?'100%':'50%' }"
                  >
                    <el-radio style="margin-bottom: 10px;" :label="item.key">{{
                      item.value
                    }}</el-radio>
                  </div>
                </div>

              </el-radio-group>
            </div>
            <div v-else style="text-align: center;margin-top: 20px;">
              暂无分支条件
            </div>
          </div>
          <!-- 公用的流程处理内容 即将流向 -->
          <div class="commonComponent_right_content">
            <div class="commonComponent_right_content_title">
              <b>即将流向:</b>
            </div>
            <div
              v-if="freeSelectNode && radio !== '' && userOptions.length !== 0"
              class="commonComponent_right_content_detail"
            >
              <div
                style=" display: inline-block;height: 20px;margin-bottom: 5px;font-size: 14px;margin-left: 0px;"
              >
                <el-checkbox v-model="checkedAll" @change="chooseCheck" />
                全选
              </div>
              <el-checkbox-group
                v-model="nextUser"
                style="vertical-align: unset;margin-top:5px"
                @change="changeUser"
              >
                <el-row :gutter="20">
                  <el-col
                    v-for="(item, key) in userOptions"
                    :key="key"
                    :span="8"
                  >
                    <el-checkbox
                      :key="item.id"
                      style="margin-bottom: 10px;"
                      :label="
                        item.id +
                          ' ' +
                          item.name.replace(/\s+/g, '') +
                          ' ' +
                          item.type
                      "
                    >{{ item.name }}</el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </div>
            <div v-else style="text-align: center;margin-top: 20px;">
              暂无即将流向
            </div>
          </div>
          <!-- 插画 -->
          <!-- <div class="commonComponent_right_ch">
          <img style="width:120px" src="../../assets/images/commonPropertypage/chahua.png">
        </div> -->
        </div>
      </div>
      <!-- 公用部分，弹窗组件 -->
      <div v-if="isProcess === 1" class="commonComponent_dialog">
        <commonDialog ref="commonDialog" />
      </div>
    </div>
  </div>
</template>

<script>
import SelectUrl from '@/components/CommonForm/components/SelectUrl';
// getCurrentTime
import { getLocalStorage } from '@/utils/commonMethods';
import commonnFunction from './commonnFunction/index.js';
import showSuccess from '@/components/showSuccess/index.vue';
import commonDialog from './components/Dialog.vue';
import { ExistInvoice } from '@/api/quotaInvoice/index.js';
import { findFather } from '@/components/CommonForm/common/index.js';
import SelectTree from '@/components/CommonForm/components/SelectTree';
import emitter, { HEADER_CROSS } from '@/utils/eventBus.js';
// getDataSoure
import {
  handleNodeFreeSelectUser,
  flowImage,
  getInstanceOpinion,
  getCanBackHistoryNodes,
  getDataSoure
} from '@/api/commonPropertypage/index';
import { getSystemVariable } from '@/utils/utils';
const myMap = new WeakMap();
// 获取某个item底下的依赖项
const getMyMapItem = function(targetKey) {
  let myLink = myMap.get(targetKey);
  if (!myLink) {
    myLink = new Map();
    myMap.set(targetKey, myLink);
  }
  return myLink;
};
export default {
  components: {
    commonDialog,
    showSuccess,
    SelectUrl,
    SelectTree
  },
  props: {
    isProcess: {
      type: Number,
      default: 1
    },
    specilaMenuId: {
      type: String,
      default: ''
    },

    disabledHeight: {
      type: Boolean,
      default: false
    },
    modalContainerHeight: {
      type: Number,
      default: 0
    }
  },
  provide() {
    return {
      form: this.form,
      getForm: () => this.form
    };
  },
  data() {
    return {
      czRadio: 0,
      nodeName: '',
      showSuccess: true,
      freeSelectNode: false,
      mapper: new Map([
        ['', '暂存'],
        ['start', '提交'],
        ['abandom', '废弃'],
        ['reject', '驳回'],
        ['agree', '同意']
        // ['startEnd', '提交']
      ]),
      headerList: [],
      title: '流程图',
      firstName: getLocalStorage('xcNickName').split('')[0],
      loading: false,
      apps: '',
      flag: 0,
      form: [],
      // contacts: '',
      // tel: '',
      // formGuid: '',
      // tableDate: '',
      // createEnterprise: '',
      // enterpriseName: '',
      // headPortrait: ''
      nodeIdentitysMap: [],
      nodeNameMap: [],
      checkedAll: '',
      radio: '',
      nextUser: '',
      userOptions: [],
      bodyData: [],
      // 附件
      files: [],
      errorComponents: false,
      parentHeaders: [{}],
      parentTableInfoId: '',
      nodeNameMapFilter: []
    };
  },
  computed: {
    getFlag() {
      if (['0', '2'].includes(this.$route.query.flag + '')) {
        return true;
      } else {
        return false;
      }
    },
    setCommonContainerHeight() {
      // 从弹框里进来
      if (this.disabledHeight) {
        return {
          // 'min-height': '350px'
          height: this.modalContainerHeight && (this.modalContainerHeight - 10 + 'px') || '400px'
        };
      } else {
        // 95
        const { isHideTop, isHideLeft } = this.$route.query;
        const T = Number(isHideTop);
        const L = Number(isHideLeft);
        let otherH = 10;
        this.isProcess === 1 ? otherH += 85 : undefined;
        if (T & L) {
          otherH += 140;
        } else if (!T) {
          undefined;
        } else {
          otherH += 70;
        }
        return {
          height: `calc(100vh - ${otherH}px)`
        };
        // isShow不知道干什么的
        // return {
        //   height: this.$route.query.isShow
        //     ? 'calc(100vh - 252px)'
        //     : 'calc(100vh - 112px)'
        // };
      }
    }
  },

  async created() {
    this.flag = Number(this.$route.query.flag);
    this.loading = true;
    getDataSoure({
      menuId: this.isProcess === 1 ? this.$route.query.menuId : this.specilaMenuId,
      formGuid: this.$route.query.formGuid
    }).then(res => {
      this.getDataSoure(res);
    });

    if (this.flag !== 1 && this.isProcess) {
      await this.handleNodeFreeSelectUser();
    } else {
      this.nodeName = '分支条件';
    }
    // 根据tableId 去判断你需要调用哪一个表格组件
    // 动态加载组件
    setTimeout(() => {
      try {
        this.apps = require(`./components/${
          this.$route.query.sId.split('-')[0]
        }.vue`).default;
      } catch (err) {
        this.$message.error(`组件定义错误： ${this.$route.query.sId}`);
        this.apps = resolve => require(['./components/TabsTable.vue'], resolve);
        this.errorComponents = true;
      }
      this.loading = false;
    }, 1000);
  },
  methods: {
    getDataSoure(res) {
      const compare = key => {
        return (obj1, obj2) => {
          const value1 = obj1[key];
          const value2 = obj2[key];
          if (value1 < value2) {
            return -1;
          } else if (value1 > value2) {
            return 1;
          } else {
            return 0;
          }
        };
      };
      if (res.success) {
        this.parentTableInfoId = res.data.parentTableInfo.id;
        // this.form.formGuid = this.$route.query.formGuid;
        this.form = [];
        res.data.parentHeaders.map(o => {
          // if (o.display === 1) {
          if (this.$route.query.formGuid === '' || this.flag === 0) {
            let sysName = '';
            let opintion = [];
            // const a = this.mapper1.get(o.dataIndex);
            if (o.systemVariablesName !== '') {
              if (o.systemVariablesName === 'enterpriseList') {
                // opintion = JSON.parse(getLocalStorage(o.systemVariablesName));
                // sysName = JSON.parse(getLocalStorage(o.systemVariablesName)).length !== 0 ? JSON.parse(getLocalStorage(o.systemVariablesName))[0].name : '';
                const enterpriseList = getSystemVariable('enterpriseList');
                opintion = enterpriseList;
                // sysName = enterpriseList.length ? enterpriseList[0].name : '';
                if (enterpriseList.length) {
                  sysName = enterpriseList[0].name;
                  this.changeEnterpriseOption(sysName);
                }
              } else {
                sysName = getSystemVariable(o.systemVariablesName);
              }
            } else {
              sysName = '';
            }
            this.form.push({
              rowNum: '1',
              linkageFields: o.linkageFields,
              editMark: false,
              edit: o.edit + '',
              display: o.display,
              selectViewOptions: o.selectViewOptions,
              focusUrl: o.focusUrl,
              focusUrlParams: o.focusUrlParams,
              opintion: opintion,
              systemVariablesName: o.systemVariablesName,
              title: o.title,
              key: o.dataIndex,
              dataIndex: o.dataIndex,
              orderId: o.orderId,
              componentType: o.componentType,
              // o.dataIndex === 'tableDate' ? getCurrentTime().split(' ')[0] : (o.dataIndex === 'acceptanceFormNum' ? '' : sysName || '')
              value:
                  o.systemVariablesName !== ''
                    ? sysName
                    : o.title.indexOf('单号') !== -1
                      ? '提交时自动生成'
                      : ''
            });
          } else {
            this.form.push({
              title: o.title,
              key: o.dataIndex,
              orderId: o.orderId,
              value: '',
              display: o.display
            });
          }
          // }
        });
        // 表头根据rowNumber 排序
        this.form.sort(compare(`orderId`));
        if (this.$route.query.formGuid !== '' && this.isProcess === 1) {
          this.form.map(o => {
            for (const key in res.data.parentBodys[0]) {
              if (o.key === key) {
                o.value = res.data.parentBodys[0][key];
              }
            }
          });
        } else {
          setTimeout(() => {
            this.form.map(o => {
              this.parentHeaders[0][o.key] = o.value;
            });
          }, 500);
        }
      } else {
        this.$message.warning(res.message);
      }
    },

    changePicker(item) {
      item.editMark = true;
      this.setInnerValue();
    },
    // 处理数据
    setInnerValue() {
      setTimeout(() => {
        this.form.map(o => {
          if (o.editMark) {
            this.parentHeaders[0][o.key] = o.value;
            this.parentHeaders[0].rowNum = o.rowNum;
          }
        });
        // 暂存(option为update)
        if (this.$route.query.formGuid !== '' && this.flag === 0) {
          this.parentHeaders[0].option = 'update';
        }
      }, 800);
    },
    // 树型下拉框选中
    selectTreeChange({ data, item }) {
      // const a = Object.values(this.$refs.commonComponents.form);

      item.treeSelectItem = data;
      item.myValue = data.name;
      item.value = data.name;
      this.changeEnterpriseOption(data.name);
      this.$forceUpdate();
      if (item.linkageFields) {
        item.linkageFields.map(link => {
          this.assignItemValue(link, data);
        });
      }
      this.itemEditMark(item, data);
      this.setInnerValue();
      emitter.emit(HEADER_CROSS,
        [item]
      );
    },
    linkItemFields(item, value) {
      const link = getMyMapItem(item);
      const linkDepOthers = link.get('focusUrlParamsForOther');
      if (linkDepOthers) {
        // ? 当item focusUrlParams other内所依赖的key发生变化时候， 清空item的myValue
        linkDepOthers.forEach(item1 => {
          item1.myValue = '';
        });
      }

      if (value) {
        if (item.linkageFields) {
          item.linkageFields.map(link => {
            if (link.level) {
              const father = findFather(value, link.level);
              if (father) {
                this.assignItemValue(link, father, item);
              }
            } else {
              this.assignItemValue(link, value, item);
            }
          });
        }
      }
    },
    // 普通下拉框选中
    selChange(v, item) {
      item.selected = v;
      // item.value = v[item.selectViewOptions.renderValue];
      item.value = v[item.selectViewOptions.renderKey];
      // 联动
      if (item.linkageFields) {
        item.linkageFields.map(link => {
          this.assignItemValue(link, v);
        });
      }
      this.itemEditMark(item, v);
      this.setInnerValue();
      emitter.emit(HEADER_CROSS,
        [item]
      );
    },
    // 联动赋值
    assignItemValue({ key, value: valueKey }, value) {
      // 赋值 ,表头加表体
      this.form.map(item => {
        if (key === item.dataIndex) {
          item.editMark = true;
          item.value = value[valueKey];
          this.setInnerValue();
        }
      });
      // }
    },
    // 标记被编辑过
    itemEditMark(item) {
      item.editMark = true;
    },
    // 时间选择器类型
    dataPicker(item) {
      const { componentType } = item;
      const typesMap = {
        yearDateSelect: {
          format: 'yyyy',
          type: 'year'
        },
        monthDateSelect: {
          format: 'yyyy-MM',
          type: 'month'
        },
        dayDateSelect: {
          format: 'yyyy-MM-dd',
          type: 'date'
        }
      };

      if (componentType in typesMap) {
        return typesMap[componentType];
      } else {
        return false;
      }
    },

    // 切换
    changeDo() {
      this.userOptions = [];
      this.radio = '';
      if (this.czRadio === 0) {
        this.handleNodeFreeSelectUser();
      } else {
        this.getCanBackHistoryNodes();
      }
    },
    // 历史审批意见
    getInstanceOpinion() {
      let params = {};
      if (this.flag === 0) {
        params = {
          instId: this.$route.query.defId
        };
      } else {
        params = {
          instId: this.$route.query.instId
        };
      }
      getInstanceOpinion(params).then(res => {
        this.$refs.commonDialog.rzContent = [];
        if (res.code === 200) {
          if (res.data.length !== 0) {
            res.data.map(o => {
              if (o.assignInfo) {
                o.assignInfo = o.assignInfo.replace(/user/g, '用户');
              }
            });
            this.$refs.commonDialog.rzContent = res.data;
          }
        } else {
          this.$refs.commonDialog.rzContent = [];
        }
      });
    },
    // 获取流程图
    flowImage() {
      this.$refs.commonDialog.isImg = true;
      let params = {};
      if (this.flag === 0) {
        params = {
          instId: '',
          defId: this.$route.query.defId,
          taskId: ''
        };
      } else {
        params = {
          instId: this.$route.query.instId,
          defId: this.$route.query.defId,
          taskId: this.$route.query.taskId
        };
      }
      flowImage(params).then(res => {
        this.$refs.commonDialog.isImg = false;
        var blob = new Blob([res], {
          type: 'imageType'
        }); // 指定格式为图片
        this.$refs.commonDialog.imgSrc = window.URL.createObjectURL(blob);
      });
    },
    // 获取分支
    async handleNodeFreeSelectUser() {
      this.nodeName = '分支条件';
      let params = '';
      if (this.flag === 0) {
        params = {
          action: 'start',
          businessKey: '',
          data: {},
          defId: this.$route.query.defId,
          extendConf: { nodeId: '' },
          nodeId: '',
          instanceId: ''
        };
      } else {
        params = {
          action: 'agree',
          data: {},
          extendConf: { nodeId: '' },
          instanceId: this.$route.query.instanceId,
          nodeId: this.$route.query.nodeId,
          taskId: this.$route.query.taskId
        };
      }
      await handleNodeFreeSelectUser(params).then(res => {
        if (res.success) {
          this.freeSelectNode = res.data.freeSelectNode;
          this.nodeIdentitysMap = res.data.nodeIdentitysMap;
          this.nodeNameMap = this.dealNodeNameMap(res.data.nodeNameMap);
          this.nodeNameMapFilter = this.nodeNameMap;
        }
      });
    },
    showDialog(type) {
      this.$refs.commonDialog.dialogVisible = true;
      this.$refs.commonDialog.width = '90%';
      if (type === 'lc') {
        this.$refs.commonDialog.title = '流程图';
        this.$refs.commonDialog.dialogType = '0';
        // 调用流程图的接口
        this.flowImage();
      } else {
        this.$refs.commonDialog.title = '流程日志';
        this.$refs.commonDialog.dialogType = '1';
        // 调用历史审批意见
        this.getInstanceOpinion();
      }
    },
    changeRadio(val) {
      this.nextUser = [];
      this.checkedAll = false;
      if (this.nodeIdentitysMap[val] !== undefined) {
        this.userOptions = this.nodeIdentitysMap[val];
        this.userOptions.map(o => {
          o.name = o.name.replace(/\s+/g, '');
        });
      } else {
        this.userOptions = [];
      }
    },
    changeItemOption(payload) {
      const { item, option } = payload;
      item.opintion = option;
    },
    changeUser() {},
    // 全选
    chooseCheck(val) {
      const allList = [];
      this.userOptions.map(o => {
        allList.push(o.id + ' ' + o.name + ' ' + o.type);
      });
      this.nextUser = val ? allList : [];
    },
    commonDo(key, tip) {
      // 特殊的key, 需要特殊处理
      if (key === 'specialStart') {
        if (this.czRadio === 0) {
          key = 'agree';
        } else {
          key = 'reject';
        }
      }
      const chineseName = this.mapper.get(key);
      return this.$confirm(
        `此操作将${tip || chineseName}该表单, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: `正在${tip || chineseName}...`,
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          if (key === 'start') {
            await this.$refs.commonComponents.validate().then(async res => {
              const { success, message, data, file } = res;
              if (success) {
                // 提交
                let flag = true;
                for (let i = 0; i < data.length; i++) {
                  // 发票校验
                  const item = data[i];
                  if (Object.keys(item.data[0]).includes('voiceObj')) {
                    const arrSet = [];
                    const CodeArr = [];

                    item.data.forEach(its => {
                      arrSet.push(its.voiceObj.InvoiceNum);
                      CodeArr.push({ invoiceCode: its.voiceObj.InvoiceCode, invoiceNum: its.voiceObj.InvoiceNum });
                    });
                    if (arrSet.length === [...new Set(arrSet)].length) {
                      await ExistInvoice(CodeArr).then(resJiao => {
                        if (resJiao.success) {
                          if (resJiao.data.result) {
                            this.$message.warning(resJiao.data.errorMessage);
                            flag = false;
                          }
                        } else {
                          this.$message.warning('校验失败');
                          flag = false;
                        }
                      });
                    } else {
                      this.$message.warning('上传发票不能相同');
                      flag = false;
                    }
                  }
                }
                if (flag) {
                  this.bodyData = data;
                  this.files = file;
                  await commonnFunction.addCommon(this, key);
                }
              } else {
                this.bodyData = [];
                this.$message.warning(message);
              }
            });
          } else if (key === '') {
            await this.$refs.commonComponents.validate().then(async res => {
              const { data, file } = res;
              this.bodyData = data;
              this.files = file;
              await commonnFunction.addCommon(this, key);
            });
            // 废弃
          } else if (key === 'abandom') {
            await commonnFunction.abandonment(this, key);
          } else if (key === 'agree') {
            await this.$refs.commonComponents.validate().then(res => {
              const { success, message, data, file } = res;
              if (success) {
                if (this.radio === '' && this.freeSelectNode) {
                  this.$message({
                    message: '人工决策不能为空',
                    type: 'warning'
                  });
                } else {
                  // 提交
                  this.bodyData = data;
                  this.files = file;
                  // 显示弹窗
                  this.$refs.commonDialog.width = '50%';
                  this.$refs.commonDialog.dialogVisible = true;
                  this.$refs.commonDialog.title = '请填写审批意见';
                  this.$refs.commonDialog.dialogType = '2';
                  this.$refs.commonDialog.opinion = '同意';
                  this.$refs.commonDialog.key = key;
                }
              } else {
                this.bodyData = [];
                this.$message.info(message);
              }
            });
          } else if (key === 'reject') {
            if (this.radio === '' && this.freeSelectNode) {
              this.$message({
                message: '人工决策不能为空',
                type: 'warning'
              });
            } else {
              this.$refs.commonDialog.width = '50%';
              this.$refs.commonDialog.dialogVisible = true;
              this.$refs.commonDialog.title = '请填写驳回意见';
              this.$refs.commonDialog.dialogType = '2';
              this.$refs.commonDialog.opinion = '写的不规范';
              this.$refs.commonDialog.key = key;
            }
          } else if (key === 'cqc-addForm') {
            return await this.$refs.commonComponents.validate().then(res => {
              // parentTableInfoId
              res.data.push({
                tableId: this.parentTableInfoId,
                data: [
                  {
                    ...this.parentHeaders[0],
                    option: 'updata'
                  }
                ]
              });
              loading.close();
              return Promise.resolve(res);
            });
          }
          loading.close();
        })
        .catch(() => {});
    },
    // 获取驳回分支
    getCanBackHistoryNodes() {
      this.nodeNameMap = [];
      this.nodeName = '退回到';
      getCanBackHistoryNodes({
        taskId: this.$route.query.taskId
      }).then(res => {
        if (!res.data.hasOwnProperty('UserTask1')) {
          if (res.data === '') {
            res.data = {};
          }
          res.data.UserTask1 = '起草节点';
        }
        if (JSON.stringify(res.data) === '{}' || res.data === '') {
          this.freeSelectNode = false;
        } else {
          this.freeSelectNode = true;
          this.nodeNameMap = this.dealNodeNameMap(res.data);
          this.nodeNameMapFilter = this.nodeNameMap;
        }
      });
    },
    dealNodeNameMap(obj) {
      const arr = [];
      for (const key in obj) {
        arr.push({
          key: key,
          value: obj[key]
        });
      }
      return arr;
    },

    // 发起人部门改变
    changeEnterpriseOption(value) {
      this.userOptions = [];
      this.nodeNameMapFilter = this.nodeNameMap.filter(item =>
        item.value.includes(value)
      );
      // 即将流向
      this.nextUser = '';
      if (this.nodeNameMapFilter.length === 1) {
        this.radio = this.nodeNameMapFilter[0].key;
        this.changeRadio(this.radio);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.commonPropertypage{
  height: 100%;
}
#component {
  border-radius: 4px;
}
.headerContent_span_tb {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 25px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  background: url("../../assets/images/layout/root.jpg");
  background-size: 100% 100%;
  vertical-align: super;
  position: relative;
  top: 9px;
  color: #fff;
}
.commonComponent {
  margin-left: 10px;
  // padding: 12px 10px;
  // padding-bottom: 5px;
  // background-color: #E6E9F0;
  .commonComponent_head {
    height: 85px;
    width: 100%;
    display: flex;

    .commonComponent_head_info {
      flex: 5;
      background: url("../../assets/images/commonPropertypage/headerBg.png");
      background-size: 100% 100%;
      padding: 10px 30px;
      line-height: 30px;
      overflow-y: auto;
    }
    .commonComponent_head_do {
      flex: 1;
      .commonComponent_head_do_container {
        display: flex;
        .commonComponent_head_btn {
          width: 80px;
          height: 80px;
          margin-left: 28px;
          border-radius: 10px;
          cursor: pointer;
        }
        .zcStyle:hover {
          box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.25);
          background: url("../../assets/images/commonPropertypage/hoverZc.png");
          background-size: 100% 100%;
        }
        .zcStyle {
          background: url("../../assets/images/commonPropertypage/zcbg.png");
          background-size: 100% 100%;
        }
        .submitStyle:hover {
          box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.25);
          background: url("../../assets/images/commonPropertypage/hoverSubmit.png");
          background-size: 100% 100%;
        }
        .submitStyle {
          background: url("../../assets/images/commonPropertypage/submit.png");
          background-size: 100% 100%;
        }
        .fqStyle:hover {
          box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.25);
          background: url("../../assets/images/commonPropertypage/hoverFq.png");
          background-size: 100% 100%;
        }
        .fqStyle {
          background: url("../../assets/images/commonPropertypage/fq.png");
          background-size: 100% 100%;
        }
      }
    }
  }
  .commonComponent_right_ch {
    padding: 10px;
    text-align: right;
    position: absolute;
    bottom: 10px;
    right: 0px;
  }

  .commonComponent_container {
    // height: calc(100vh - 252px);
    // height: calc(100vh - 112px);
    // margin-top: 10px;
    // margin-left: 10px;
    display: flex;
    #component {
      flex: 1;
      background-color: #fff;
      overflow-y: auto;
      position: relative;

      .commonComponent_container_skeleton {
        background-color: #fff;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 33;
        padding: 20px;
        padding-top: 60px;
        /deep/ .ant-skeleton-content .ant-skeleton-paragraph > li,
        /deep/ .ant-skeleton-content .ant-skeleton-title {
          height: 35px;
          border-radius: 8px;
        }
      }
    }
    //需要设置高度,不然里面的表格只有1行
    .commonComponents{
      height: 100%;
    }
    .commonComponent_right {
      width: 300px;
      background-color: #fff;
      margin-left: 10px;
      padding: 5px;
      font-size: 15px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: rgba(0, 0, 0, 0.85);
      overflow-y: auto;
      position: relative;
    }
  }
}
.commonComponent_head_info_div {
  flex: 3;
  font-size: 15px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: rgba(0, 0, 0, 0.65);
  margin-top: 5px;
}
.info_style {
  color: #1890ff;
  margin-left: 15px;
}
.commonComponent_right_title {
  display: flex;
  border-bottom: 1px solid #d8d8d8;
  padding: 5px 5px 4px 5px;
}
.commonComponent_right_content {
  padding: 10px;
  .commonComponent_right_content_title,
  .commonComponent_right_content_do {
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    display: flex;
    color: rgba(0, 0, 0, 0.85);
  }
  .commonComponent_right_content_detail {
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    padding: 12px;
    padding-bottom: 2px;
  }
}
.commonComponent_right_content_detail /deep/ .el-radio__label {
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 16px;
  vertical-align: middle;
  display: inline-block;
  padding-left: 5px;
}
.commonComponent_right_content_detail /deep/ .el-checkbox__label {
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 16px;
  vertical-align: middle;
  display: inline-block;
  padding-left: 5px;
}
.commonComponent_head_info >>> .el-input__inner {
  height: 100% !important;
  min-height: 30px;
}
.commonComponent_head_info >>> .el-input__suffix {
  position: absolute;
  height: 100%;
  right: 5px;
  top: 6px;
  text-align: center;
  color: #c0c4cc;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  pointer-events: none;
}
.commonComponent_head_info >>> .el-input__prefix {
  position: absolute;
  height: 100%;
  left: 5px;
  top: -5px !important;
  text-align: center;
  color: #c0c4cc;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.datePicker >>> .el-input__suffix {
  position: absolute;
  height: 100%;
  right: 0px;
  top: -5px !important;
  text-align: center;
  color: #c0c4cc;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
//输入框光标变蓝
/deep/ input {
  caret-color: #1890ff;
}
</style>
